<div class="pannel-default">
    <nz-tabset [nzTabBarExtraContent]="extraTemplate">
        <nz-tab [nzTitle]="menu.title">
            <nz-table #expandTable [nzData]="menuList" [nzFrontPagination]="false" [nzHideOnSinglePage]="true" [nzLoading]="tableLoading">
                <thead>
                    <tr>
                        <th nzWidth="25%">{{'system.menu.name'|translate}}</th>
                        <th nzWidth="25%">{{'system.menu.frontPath'|translate}}</th>
                        <th nzWidth="25%">{{'system.menu.path'|translate}}</th>
                        <th>{{'cz.title'|translate}}</th>
                    </tr>
                </thead>
                <tbody>
                    <ng-container *ngFor="let data of expandTable.data">
                        <tr>
                            <td [nzIndentSize]="0" [nzShowExpand]="!!data.children" [(nzExpand)]="data.expand" (nzExpandChange)="changeExpand($event,data)">
                                <span style="font-weight:bold;color:#000;"> {{ data.name | menuLanguage }}</span>
                            </td>
                            <td>{{ data.frontPath }}</td>
                            <td>{{ data.path }}</td>
                            <td><a style="margin-right:10px;" (click)="updateMenu(data)">{{'cz.edit'|translate}}</a><a style="margin-right:10px;" (click)="addChildMenu(data)">{{'system.menu.addChild'|translate}}</a><a (click)="deleteMenu(data)">{{'cz.delete'|translate}}</a></td>
                        </tr>
                        <ng-container *ngFor="let item of data.children">
                            <tr *ngIf="data.expand">
                                <td [nzIndentSize]="40" [nzShowExpand]="!!item.children" [(nzExpand)]="item.expand">
                                    <span style="color:#666;"> {{ item.name | menuLanguage }}</span>
                                </td>
                                <td>{{ item.frontPath }}</td>
                                <td>{{ item.path }}</td>
                                <td><a style="margin-right:10px;" (click)="updateMenu(item)">{{'cz.edit'|translate}}</a><a style="margin-right:10px;" (click)="addChildBtn(item)">{{'system.menu.addBtn'|translate}}</a><a (click)="deleteMenu(item)">{{'cz.delete'|translate}}</a></td>
                            </tr>
                            <ng-container *ngFor="let btn of item.children">
                                <tr *ngIf="item.expand">
                                    <td [nzIndentSize]="70">
                                        {{ btn.name | menuLanguage }}
                                    </td>
                                    <td>{{ btn.frontPath }}</td>
                                    <td>{{ btn.path }}</td>
                                    <td><a style="margin-right:10px;" (click)="updateMenu(btn)">{{'cz.edit'|translate}}</a><a (click)="deleteMenu(btn)">{{'cz.delete'|translate}}</a></td>
                                </tr>
                            </ng-container>
                        </ng-container>
                    </ng-container>
                </tbody>
            </nz-table>
        </nz-tab>
    </nz-tabset>
    <ng-template #extraTemplate>
        <button nz-button nzType="primary" (click)="addMenu()">{{'system.menu.add'|translate}}</button>
    </ng-template>
    <nz-modal [(nzVisible)]="isVisible" [nzMaskClosable]="false" [nzTitle]="modalTitle" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()" [nzOkLoading]="isOkLoading">
        <form nz-form class="org-register-one" [formGroup]="validateForm">
            <nz-form-item>
                <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="name">{{'system.menu.name'|translate}}</nz-form-label>
				<nz-form-control [nzSm]="14" [nzXs]="24" [(nzValidateStatus)]="validateForm.controls.zh_CN_name">
                    <nz-input-group nzAddOnBefore="{{'chinese' | translate}}">
                        <input type="text" formControlName="zh_CN_name" nz-input placeholder="{{'placeholder.input'|translate}}{{'system.menu.name'|translate}}" />
                    </nz-input-group>
                </nz-form-control>
                <nz-form-control nzOffset="6" [nzSm]="14" [nzXs]="24" [(nzValidateStatus)]="validateForm.controls.en_US_name">
                    <nz-input-group nzAddOnBefore="{{'english' | translate}}">
                        <input type="text" formControlName="en_US_name" nz-input placeholder="{{'placeholder.input'|translate}}{{'system.menu.name'|translate}}" />
                    </nz-input-group>
                </nz-form-control>
                <nz-form-control nzOffset="6" [nzSm]="14" [nzXs]="24" [(nzValidateStatus)]="validateForm.controls.ja_JP_name">
                    <nz-input-group nzAddOnBefore="{{'japanese' | translate}}">
                        <input type="text" formControlName="ja_JP_name" nz-input placeholder="{{'placeholder.input'|translate}}{{'system.menu.name'|translate}}" />
                    </nz-input-group>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="frontPath" nzRequired>{{'system.menu.frontPath'|translate}}</nz-form-label>
                <nz-form-control [nzSm]="14" [nzXs]="24" [nzValidateStatus]="validateForm.get('frontPath')">
                    <input nz-input id="frontPath" formControlName="frontPath" placeholder="{{'placeholder.input'|translate}}{{'system.menu.frontPath'|translate}}" />
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="path" nzRequired>{{'system.menu.path'|translate}}</nz-form-label>
                <nz-form-control [nzSm]="14" [nzXs]="24" [nzValidateStatus]="validateForm.get('path')">
                    <input nz-input id="path" formControlName="path" placeholder="{{'placeholder.input'|translate}}{{'system.menu.path'|translate}}" />
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="image" nzRequired>{{'system.menu.image'|translate}}</nz-form-label>
                <nz-form-control [nzSm]="14" [nzXs]="24" [nzValidateStatus]="validateForm.get('image')">
                    <input nz-input id="image" formControlName="image" placeholder="{{'placeholder.input'|translate}}{{'system.menu.image'|translate}}" />
                </nz-form-control>
            </nz-form-item>
        </form>
    </nz-modal>
</div>
